<template>
  <div>
    <a-card :border="false">
      <!--表头条件搜索  -->
      <a-form-model layout="inline" :model="bloodform">
        <a-form-model-item>
          <a-input placeholder="请输入表名称" style="width: 150px" v-model="bloodform.sourceTable"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-input placeholder="请输入字段名称" style="width: 150px" v-model="bloodform.sourceColumn"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择交易码" v-model="bloodform.targetName" style="width: 150px">
            <a-select-option v-for="targetName in targetNameList" :key="targetName">{{ targetName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-input placeholder="请输入ESB字段" style="width: 150px" v-model="bloodform.targetColumn"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" icon="sync" @click="resetForm">重置</a-button>
        </a-form-model-item>
      </a-form-model>
      <br />
      <!-- 主体表格内容 -->
      <div style="margin-bottom: 16px">
        <a-button type="primary" icon="plus">导入</a-button>&nbsp;&nbsp;
        <a-button type="primary" icon="plus">下载</a-button>&nbsp;&nbsp;
      </div>
      <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="data" :pagination="false">
        <a slot="sourceTable" slot-scope="text, record" @click="showTable(record)">{{ text }}</a>
      </a-table>
      <br />
      <!-- 分页组件 -->
      <a-pagination v-model="currentpage" :show-total="(total, range) => `第${range[0]}-${range[1]}条 , 共计${total} 条记录`"
      :total="total" :pageSize="pageSize" @change="pageChange" />
    </a-card>
    <!-- tableInfo的modal -->
    <div v-if="tableInfoVisible">
      <a-modal v-model="tableInfoVisible" title="表结构详情" width="70%">
        <a-card :bordered="false" style="width: 100%">
          <tableInfo :sourceTable="tableInfo.sourceTable" :databaseName="tableInfo.databaseName"></tableInfo>
        </a-card>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { getBloodList } from '@/api/blood/analysis'
import tableInfo from './TableInfo'

export default {
  components: {
    tableInfo,
  },
  data() {
    return {
      tableInfo: {},
      tableInfoVisible: false,
      bloodform: {},
      targetNameList: [],
      total: 0,
      currentpage: 1,
      pageSize: 10,
      data: [],
      columns: [
        { title: '来源库', dataIndex: 'databaseName', key: 'databaseName' },
        { title: '来源表', dataIndex: 'sourceTable', key: 'sourceTable', scopedSlots: { customRender: 'sourceTable' } },
        { title: '来源字段', dataIndex: 'sourceColumn', key: 'sourceColumn' },
        { title: '来源字段类型', dataIndex: 'tableDataType', key: 'tableDataType' },
        { title: '来源字段中文名称', dataIndex: 'columnName', key: 'columnName' },
        { title: '交易/目标表', dataIndex: 'targetName', key: 'targetName' },
        { title: 'ESB字段/目标字段', dataIndex: 'targetColumn', key: 'targetColumn' },
        { title: '目标字段数据类型', dataIndex: 'dataType', key: 'dataType' },
        { title: '映射类型', dataIndex: 'isType', key: 'isType' },
        { title: '字段描述', dataIndex: 'columnDesc', key: 'columnDesc' },
      ],
      selectedRowKeys: [],
    }
  },

  created() {
    this.getBloodList()
  },

  methods: {
    showTable(record) {
      this.tableInfo = {
        sourceTable: record.sourceTable,
        databaseName: record.databaseName,
      }
      this.tableInfoVisible = true
    },

    pageChange() {
      this.selectedRowKeys = []
      getBloodList(this.bloodform, this.currentpage, this.pageSize).then((res) => {
        this.total = res.result.total
        this.data = res.result.bloodList
      })
    },

    onSelectChange(selectedRowKeys) {
      //console.log("text",selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    },

    handleSubmit() {
      getBloodList(this.bloodform, 1, this.pageSize).then((res) => {
        this.total = res.result.total
        this.data = res.result.bloodList
      })
    },

    resetForm() {
      this.selectedRowKeys = []
      this.bloodform = {}
      getBloodList(this.bloodform, 1, this.pageSize).then((res) => {
        this.total = res.result.total
        this.data = res.result.bloodList
      })
    },

    getBloodList() {
      getBloodList(this.bloodform, this.currentpage, this.pageSize).then((res) => {
        this.total = res.result.total
        this.data = res.result.bloodList
      })
    },
  },
}
</script>

<style>
@import '~@assets/less/common.less';
.ant-pagination {
    float: right;
}
.ant-table-thead > tr >th {
    text-align: center;
}
.ant-table-tbody > tr >td {
    text-align: center;
}
</style>